<template>
	<view>
		
	  <Lines />
	  
	  <view class="list">
		  
		  <!--左侧滑动-->
		  <scroll-view scroll-y="true" class='list-left' :style="'height:'+clentHeight+'px;'">
		  	<view
		  		v-for='(item,index) in leftData'
		  		:key='index'
		  		@tap="changeLeftTab(index,item.id)"
		  	>
		  		<view class='left-name' 
		  			:class=' activeIndex ===index ?"left-name-active":"left-item" '
		  		>{{item.name}}</view>
		  	</view>
		  </scroll-view>
		  
		  <!--右侧滑动-->
		  <scroll-view scroll-y="true" class='list-right' :style="'height:'+clentHeight+'px;'">
		  	
		  	<view 
		  		class='righ-list'
		  		v-for='(item,index) in rightData'
		  		:key='index'
		  	>
		  		<block v-for='(k,i) in item'>
		  			<view class='list-title'>{{k.name}}</view>
		  			<view class='right-content'>
		  				<view class='right-item' v-for='(j,idx) in k.list' :key='idx'  @tap="goDetails(j.id)">
		  					<image class='right-img' :src="j.imgUrl" mode=""></image>
		  					<view class='right-name'>{{j.name}}</view>
		  				</view>
		  			</view>
		  		</block>
		  	</view>
		  	
		  </scroll-view>
	  	
	  </view>
	  <Tabbar cureentPage='list'></Tabbar>
	</view>
</template>

<script>
	import Tabbar from '@/components/common/Tabbar.vue'
	import $http from '@/common/api/request.js'
	import Lines from '@/components/common/Lines.vue'
	export default {
		components:{
			Lines,Tabbar,
		},
		data() {
			return {
				clentHeight:0,
				activeIndex:0,
				//左侧数据
				leftData:[],
				//右侧数据
				rightData:[]
			}
		},
		methods: {
			
			goDetails(id){
				console.log(id);
				uni.navigateTo({
					url:'../../pages/details/details?id='+id+''
				})
			},
			
			//获取可视区域高度【兼容】
			getClientHeight(){
				const res = uni.getSystemInfoSync();
				const system = res.platform;
				if( system ==='ios' ){
					return 44+res.statusBarHeight;
				}else if( system==='android' ){
					return 48+res.statusBarHeight;
				}else{
					return 0;
				}
			},
			
			//左侧点击事件
			changeLeftTab(index,id){
				this.getData(id);
				this.activeIndex = index;
			},
			
			//请求数据方法
			getData(id){
				if(  id === (this.activeIndex+1) ){
					return;
				}
				
				$http.request({
					url:"/goods/list"
				}).then((res)=>{
					let leftData = [];
					let rightData = []
					res.forEach(v=>{
						leftData.push({
							id:v.id,
							name:v.name
						})
						//如果点击的id值相同
						if(    v.id  === (this.activeIndex+1) ){
							rightData.push(v.data);
						}
					})
					this.leftData = leftData;
					this.rightData = rightData;
					
				}).catch(()=>{
					uni.showToast({
						title:'请求失败',
						icon:'none'
					})
				})	
			},
			
		},
		
		onLoad(){
			this.getData();
		},

		//获取可视高度
		onReady() {
			uni.getSystemInfo({
				success: (res) => {
					this.clentHeight = res.windowHeight - this.getClientHeight();
				}
			})
		},
		
	   //input输入框点击事件
		onNavigationBarSearchInputClicked(){
			uni.navigateTo({
				url:'../search/search'
			})
		}
	}
</script>

<style scoped>
	.list{
		display: flex;
	}
	.list-left{
		width: 200rpx;
	}
	.left-item{
		border-bottom:2rpx solid #FFFFFF;
		font-size:28rpx;
		font-weight: bold;
		background-color: #F7F7F7;
	}
	.left-name{
		padding:30rpx 6rpx;
		text-align: center;
	}
	.left-name-active{
		border-left:8rpx solid #49BDFB;
		background-color: #FFFFFF;
	}
	.list-right{
		flex:1;
		padding-left:30rpx;
	}
	.list-title{
		font-weight: bold;
		padding:30rpx 0;
	}
	.right-content{
		display: flex;
		flex-wrap: wrap;
	}
	.right-item{
		width: 150rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding:10rpx;
	}
	.right-name{
		padding:16rpx 0;
		 width: 50px; /* 设置容器宽度 */  
		        overflow: hidden; /* 隐藏超出部分 */  
		        white-space: nowrap; /* 防止文本换行 */  
		        text-overflow: ellipsis; /* 用省略号表示超出部分 */  
	}
	.right-img{
		width: 150rpx;
		height: 150rpx;
	}
	
	
</style>